<template>
	<div class="two">
		<div class="center">
			<h2>框架排行（组件two）</h2>
		</div>
		<div class="">
			<ul>
				<li v-for="item in frames"><span>{{item.name}}</span><span class="star">{{item.star}}</span></li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		name:'ListTwo',
		// props:['frames']
		computed:{
			frames(){
				return this.$store.state.frames
			}
		}
	}
	
</script>

<style scoped="scoped">
	.two{
		background-color: #dae997;
		box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
		margin-bottom: 30rpx;
		padding: 10px 20px;
	}
	.two ul{
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	.two li{
		display: flex;
		flex-direction: column;
		margin-right: 10px;
		padding: 20px;
		background: rgba(255,255,255,0.7);
	}
	.star{
		font-weight: bold;
		color: #e299cc;
	}
	.center{
		width: 100%;
		text-align: center;
	}
</style>
